<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import StatCard from '@/components/common/StatCard.vue'
import InfoCard from '@/components/common/InfoCard.vue'

// 模拟数据
const statistics = ref([
  { title: '总房屋数', value: '245', icon: 'House', color: 'primary', percent: 0, trend: 'up' },
  { title: '业主总数', value: '186', icon: 'User', color: 'success', percent: 5, trend: 'up' },
  { title: '待处理报修', value: '24', icon: 'Tools', color: 'warning', percent: 12, trend: 'down' },
  { title: '物业费收缴率', value: '92%', icon: 'Money', color: 'danger', percent: 3, trend: 'up' },
])

const recentRepairs = ref([
  { id: 1, title: '水管漏水', status: '待处理', date: '2023-05-21', type: '水电维修' },
  { id: 2, title: '门锁损坏', status: '处理中', date: '2023-05-20', type: '设施维修' },
  { id: 3, title: '电梯故障', status: '已完成', date: '2023-05-19', type: '电梯维修' },
])

const notices = ref([
  { id: 1, title: '5月物业费缴纳通知', date: '2023-05-15', read: true },
  { id: 2, title: '小区环境整治通知', date: '2023-05-10', read: false },
  { id: 3, title: '电梯检修通知', date: '2023-05-08', read: true },
])

const paymentChart = ref(null)
const paymentChartDom = ref(null)

onMounted(() => {
  // 初始化支付统计图表
  if (paymentChartDom.value) {
    paymentChart.value = echarts.init(paymentChartDom.value)
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} 万'
        }
      },
      series: [
        {
          name: '物业费收入',
          type: 'line',
          smooth: true,
          data: [5.3, 6.1, 5.8, 6.4, 7.2, 6.9],
          itemStyle: {
            color: '#4a7bff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(74, 123, 255, 0.8)' },
                { offset: 1, color: 'rgba(74, 123, 255, 0.1)' }
              ]
            }
          }
        }
      ]
    }
    paymentChart.value.setOption(option)
    
    // 响应式调整
    window.addEventListener('resize', () => {
      paymentChart.value && paymentChart.value.resize()
    })
  }
})
</script>

<template>
  <div class="h-full w-full">
    <div class="flex items-center mb-4 w-full">
      <h1 class="text-2xl font-bold">仪表盘</h1>
    </div>
    
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4 w-full">
      <StatCard 
        v-for="(stat, index) in statistics" 
        :key="index"
        :title="stat.title"
        :value="stat.value"
        :icon="stat.icon"
        :color="stat.color"
        :percent="stat.percent"
        :trend="stat.trend"
        class="bg-white rounded-lg shadow-sm p-4 w-full"
      />
    </div>
    
    <!-- 第二行 - 图表和最近报修 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4 w-full">
      <!-- 物业费收入统计 -->
      <InfoCard 
        title="物业费收入统计" 
        icon="TrendCharts" 
        color="primary"
        class="lg:col-span-2 w-full"
      >
        <div ref="paymentChartDom" style="width: 100%; height: 280px;"></div>
      </InfoCard>
      
      <!-- 最近报修 -->
      <InfoCard 
        title="最近报修" 
        icon="Tools" 
        color="warning"
        :showMore="true"
        class="w-full"
      >
        <el-table :data="recentRepairs" style="width: 100%" :show-header="false">
          <el-table-column prop="title" width="120">
            <template #default="scope">
              <div class="truncate font-medium">{{ scope.row.title }}</div>
              <div class="text-xs text-text-light">{{ scope.row.date }}</div>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template #default="scope">
              <el-tag 
                size="small" 
                :type="
                  scope.row.status === '待处理' ? 'warning' : 
                  scope.row.status === '处理中' ? 'primary' : 'success'
                "
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </InfoCard>
    </div>
    
    <!-- 第三行 - 公告 -->
    <InfoCard 
      title="最新公告" 
      icon="Bell" 
      color="success"
      :showMore="true"
      class="w-full"
    >
      <div class="divide-y divide-border-light">
        <div 
          v-for="notice in notices" 
          :key="notice.id"
          class="py-3 flex justify-between items-center"
        >
          <div class="flex items-center">
            <div 
              class="w-2 h-2 rounded-full mr-3"
              :class="notice.read ? 'bg-gray-300' : 'bg-primary'"
            ></div>
            <span>{{ notice.title }}</span>
          </div>
          <div class="text-text-light text-sm">{{ notice.date }}</div>
        </div>
      </div>
    </InfoCard>
  </div>
</template>
